<template>
    <Popup ref="popupRef" :title="modeTitle" :formState="formData" :rules="rules"
     :addApi="addRole" :editApi="editRole" @success="handleSuccess">
        <template #default="{ formState }">
            <a-form-item label="角色名称" name="name">
                <a-input v-model:value="formState.name" />
            </a-form-item>

            <a-form-item label="角色描述" name="description">
                <a-textarea v-model:value="formState.description" />
            </a-form-item>

            <a-form-item label="状态" name="status">
                <a-switch v-model:checked="formState.status" />
            </a-form-item>
        </template>
    </Popup>
</template>

<script setup lang="ts">
import Popup from '@/components/popup/index.vue'
import { addRole , editRole} from '@/api/system/permission/role'
const popupRef = ref<InstanceType<typeof Popup>>()
const emit = defineEmits(['success'])

interface FormState {
    id?: number
    name: string
    description: string
    status: boolean
}
const formData = reactive<FormState>({
    id: undefined,
    name: '',
    description: '',
    status: true
})

const rules = {
    name: [{ required: true, message: '请输入角色名称' }]
}

const modeName = ref<string>('add')
const modeTitle = computed(() => {
    return modeName.value === 'add' ? '新增角色' : '编辑角色'
})
const open = (mode: string, record?: any) => {
    modeName.value = mode
    popupRef.value?.open(mode, record)
}

const handleSuccess = () => {
    emit('success')
}

defineExpose({
    open
})
</script>
